<template>
<a-modal v-model:open="open" :title="modalType.title">
    <a-form 
        :model="modalType.data" 
        name="modalForm" 
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >   
        <slot v-for="item, index in Object.keys(modalType.data)" :key="index" :name="item">
            <a-form-item :label="item" :name="item">
                <a-input v-model:value="Object.values(modalType.data)[index]" placeholder="请输入名称" />
            </a-form-item>
        </slot>
    </a-form>
</a-modal>
</template>

<script setup>
    import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue';
    
    const { proxy } = getCurrentInstance();

    const open = ref(false);
    const modalType = defineModel({ type: Object, default: () => {
        return {
            title: '新增',
            type: 'add',
            data: {}
        }}
    })
    // 弹窗操作
    const showModal = (value) => {
        open.value = value;
    };

    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    defineExpose({ showModal });
</script>